<template>
  <section class="setting-bind">
    <div class="inner">
        <p>账号绑定可以使您更方便登陆红粉</p>

        <div class="bind-container clearfix">
            <div class="bind-item">
                <div class="icon">
                    <img src="../../../assets/img/phone.png" alt="icon">
                </div>
                <div class="detail">
                    <p>你已绑定手机号：198****1111</p>
                    <Button type="primary" size="large" style="width: 148px" >更换手机</Button>
                </div>
            </div>
            <div class="bind-item">
                <div class="icon">
                    <img src="../../../assets/img/QQ.png" alt="icon">
                </div>
                <div class="detail">
                    <p>你已绑定QQ号：NickName</p>
                    <Button type="primary" size="large" style="width: 148px" >解除绑定</Button>
                </div>
            </div>
            <div class="bind-item">
                <div class="icon">
                    <img src="../../../assets/img/weibobind.png" alt="icon">
                </div>
                <div class="detail">
                    <p>你已绑定微博号：Nickname</p>
                    <Button type="primary" size="large" style="width: 148px" >解除绑定</Button>
                </div>
            </div>
            <div class="bind-item">
                <div class="icon">
                    <img src="../../../assets/img/weichart.png" alt="icon">
                </div>
                <div class="detail">
                    <p>你已绑定微信号：Nickname</p>
                    <Button type="primary" size="large" style="width: 148px" >解除绑定</Button>
                </div>
            </div>
        </div>
    </div>
  </section>
</template>

<script>
import MsgItem from '@/components/ListItem/MsgItem'
export default {
  name: 'SettingAvatar',
  components: {
      MsgItem
  },
   data () {
      return {
          formItem: {}
      }
   },
    created () {
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .setting-bind {
    border: 1px solid @border-color;
    border-top: 3px solid @theme-color-dark;
    padding: 15px;
      .bind-container {
          margin-top: 50px;
          .bind-item {
              float: left;
              width: 50%;
              margin-bottom: 60px;
              &:after {
                  display: block;
                  clear: both;
                  content: "";
                  visibility: hidden;
                  height: 0;
              }
              .icon, .detail {
                  float: left;
              }
              .icon {
                  font-size: 0;
                  line-height: 1;
                  height: 80px;
                  width: 80px;
                  margin-right: 35px;
                  img {
                      width: 100%;
                      height: 100%;
                  }
              }
              .detail {
                  p{
                      margin-bottom: 25px;
                  }
              }
          }
      }
  }
</style>
